<template>
  <div class="allSort-body">
    <backTo-view :child-msg="current"></backTo-view>
    <!--特色标签-->
    <div class="featrue-box mb23" v-for="item in tags" :key="item.id">
      <p class="lable-title">{{item.name}}（{{item.list.length}}）</p>
      <ul class="featrue-ul com-ul cf">
        <li class="active" v-for="value in item.list" :key="value.id" @click="toTagPage(value.tagName)">{{value.tagName}}</li>
      </ul>
    </div>
    <!--<div class="featrue-box mb23">
      <p class="lable-title">特色标签（48）</p>
      <ul class="featrue-ul com-ul cf">
        <li class="active">有奖试玩</li>
        <li>BT游戏</li>
        <li>汉化游戏</li>
        <li>修改破解</li>
        <li>腾讯</li>
        <li>网易</li>
        <li>独立游戏</li>
        <li>开罗</li>
        <li>端游移植</li>
        <li>Steam移植</li>
        <li>育碧</li>
        <li>Gameloft</li>
      </ul>
    </div>
    <div class="mb23">
      <p class="lable-title">玩法标签（48）</p>
      <ul class="featrue-ul com-ul cf">
        <li class="active">有奖试玩</li>
        <li>BT游戏</li>
        <li>汉化游戏</li>
        <li>修改破解</li>
        <li>腾讯</li>
        <li>网易</li>
        <li>独立游戏</li>
        <li>开罗</li>
        <li>端游移植</li>
        <li>Steam移植</li>
        <li>育碧</li>
        <li>Gameloft</li>
      </ul>
    </div>-->
  </div>
</template>

<script>
import introduceList from '../components/introduceList.vue'
import serachBox from '../components/serachBox.vue'
import backTo from '../components/backTo.vue'
export default {
  name: 'allClass',
  components: {
    'introduceList-view': introduceList,
    'serachBox-view': serachBox,
    'backTo-view': backTo
  },
  data () {
    return {
      type: true,
      searchWord: '',
      current: '全部分类',
      dataList: [],
      tags: [],
      list: []
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.dataList.split('').reverse().join('')
    }
  },
  methods: {
    toDetail (id) {
      // this.$router.go(-1)
      this.$router.push({path: '/detail', query: {userId: id}})
    },
    toTagPage (tagName) {
      console.log(tagName)
    },
    getMain () {
      this.tags = []
      for (let value of this.dataList) {
        if (value.parentId === 0) {
          this.tags.push({
            name: value.tagName,
            id: value.id,
            list: []
          })
          // this.tags[value.id - 1].name = value.tagName
        }
      }
      for (let value of this.dataList) {
        if (value.parentId !== 0) {
          this.tags[value.parentId - 1].list.push(value)
        }
      }
      console.log(this.tags)
    }
  },
  created () {
    let searchAPI = '/getTags'
    let that = this
    // 此地有传auth(token)认证 为空就不会执行
    this.$request.get(searchAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          that.dataList = res.data.rst
          console.log(that.dataList)
          that.getMain()
        }
      }
    )
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .lable-title{
    text-align: left;
  }
</style>
